<template>
  <div>
    <h1>Home组件</h1>
    <div>
      <button @click="$router.back()">后退1</button>
      <button @click="$router.forward()">前进1</button>
      <button @click="$router.go(-2)">后退2</button>
    </div>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>
    </div>
    <div>
      <!-- 
        router-link组件的属性
          replace属性:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录
          有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
       
          tag属性:有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
            tag属性被弃用了 可能会有警告。可以使用插槽的写法替代tag属性

          active-class属性：设置链接激活时使用的 CSS 类名。
       -->
      <router-link active-class="active" tag="button" replace to="/home/news"
        >新闻</router-link
      >
      <router-link
        active-class="active"
        replace
        tag="button"
        :to="{
          path: '/home/music',
        }"
        >音乐</router-link
      >
      <router-link
        active-class="active"
        replace
        :to="{
          name: 'game',
        }"
      >
        <button>游戏</button>
      </router-link>
    </div>

    <!-- 
      keep-alive也能包裹住路由的router-view组件,控制路由组件的缓存
      
     -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toNews() {
      this.$router.push("/home/news");
    },
    toMusic() {
      this.$router.push({
        path: "/home/music",
      });
    },
    toGame() {
      this.$router.push({
        name: "game",
      });
    },
  },
};
</script>

<style scoped>
.active {
  background: cyan;
}
.active button {
  background: cyan;
}
</style>
